<template>
  <div class="box">
    <div class="box-header">
      <span class="title">流程事务概况</span>
    </div>
    <div class="box-body scroll">
      <div class="abstract">
        <h1>{{flowName}}</h1>
        <dl>
          <dt>创建人：{{flowCreator}}</dt>
          <dt>所属部门：{{flowCreatorGroup}}</dt>
          <dt>开始时间：{{flowStartDate}}</dt>
          <dt>进度情况: {{flowSchedule}}</dt>
          <dt>当前所处环节：{{currentNodeName}}</dt>
          <dt>项目预算：{{flowBudget}}</dt>
        </dl>
        <x-loading v-if="showLoading"></x-loading>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Loading from "@/components/Loading";
import bus from "@/utils/bus";

export default {
  name: "",
  data() {
    return {
      showLoading: false,
      flowName: null,
      flowCreator: null,
      flowCreatorGroup: null,
      flowStartDate: null,
      flowSchedule: null,
      currentNodeName: null,
      flowBudget: 0
    };
  },
  components: {
    "x-loading": Loading
  },
  created() {
    bus.$on("render-flow-analyze", msg => {
      this.renderUseListData(msg.name);
      this.renderUseDetailData(msg.id)
    });
  },
  methods: {
    renderUseListData(projectName) {
      this.showLoading = true;
      let params = {
        projectName: projectName
      };
      axios.get(this.URLHEAD_TA + "getXMXX", { params: params }).then(res => {
        let json = res.data;
        if (json !== null && json !== undefined) {
            this.flowSchedule = json.Data.list[0].wcl
            this.currentNodeName = json.Data.list[0].dqjd || json.Data.list[0].isFinished
            this.showLoading = false
        }else{
            throw 'getXMXX的List为空'
        }
      });
    },
    renderUseDetailData(projectId) {
        this.showLoading=true;
        let params = {
            code:projectId,
            separate:true
        }
        axios.get(this.URLHEAD_TA + 'getProjectTitle',{params:params}).then(res=>{
            let json = res.data;
            this.flowName = json.Data.projectName
            this.flowCreator = json.Data.PersonCharge
            this.flowCreatorGroup = json.Data.proAscription
            this.flowStartDate = json.Data.proBeginTime
            this.flowBudget = json.Data.budget
            this.showLoading = false;
        })
    }
  }
};
</script>

<style scoped>
.col{
  padding:0;

}
.box{
  margin:5px;
}
.box-body{
  height:200px;
}
.abstract {
    padding: 16px 12px;
}

.abstract h1 {
    font-size: 18px;
    color: #fff;
    padding-bottom: 1em;
}

.abstract dl {
    color: #fff;
    font-size: 14px;
    line-height: 2em;
    display: flex;
    flex-flow: row wrap;
}

.abstract dt {
    flex-grow: 1;
    flex-shrink: 1;
}
</style>